<template>
  <!--  <div class="center">
    <el-table v-loading="listLoading" :data="tableData" class="table" border>
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">描述: {{ props.row.projectDescription }}</p>
            <p m="t-0 b-2">总人数: {{ props.row.total }}</p>
            <p m="t-0 b-2">创建时间: {{ props.row.createTime }}</p>
            <p m="t-0 b-2">图片</p>
            <img m="t-0 b-2" src="{{ props.row.picture }}" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="projectName" />
      <el-table-column label="项目类别" prop="classify" />
      <el-table-column label="项目状态" prop="status-string" />
      &lt;!&ndash;      &lt;!&ndash;自定义的，到时候根据status是1还是0判断状态&ndash;&gt;&ndash;&gt;
    </el-table>
  </div>-->
  <el-row class="centerel">
    <el-col style="margin: 20px">
      <el-card
        :body-style="{ padding: '0px' }"
        style="width: 300px; min-height: 100px"
      >
        <img src="@/public/def.jpg" class="image" alt="" />
        <div style="padding: 14px; height: 100px">
          <el-row style="font-size: 17px; font-weight: bold">
            <span class="hidetext"></span>
            <el-tag
              style="position: absolute; margin-left: 205px"
              round
              effect="plain"
              type="warning"
              >项目</el-tag
            >
          </el-row>
          <el-row style="font-size: 13px; margin: 3px 0 0 6px"
            >创建人:&nbsp; '用户暂未设置真名'
          </el-row>
          <el-row style="font-size: 4px; margin: 6px">
            <el-tag> 人数0~ </el-tag>
            <el-tag effect="light" style="margin-left: 5px"
              ><span>开发中</span>
              <span>已完成</span>
              <span>起步阶段</span></el-tag
            >
            <el-tag style="margin-left: 5px">
              <span>人数已满</span>
              <span>不可加入</span>
              <span>可加入</span>
            </el-tag>
            <!--            <el-tag type="success" style="margin: 0 0 0 5px">
              总人数{{ o.total }}
            </el-tag>-->
          </el-row>
          <div class="bottom">
            <time class="time"></time>
            <!-- 需要绑定事件：可以跳转至详情页面中 -->
            <el-button text class="button">详细内容</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
    <div>
      <el-empty :image-size="200" />
    </div>
  </el-row>

  <el-row class="pageset">
    <el-pagination
      class="pageset"
      :page-sizes="[2, 4, 6, 10]"
      background
      layout="total, sizes, prev, pager, next, jumper"
    />
  </el-row>
</template>

<style>
.table {
  align-content: center;
  margin: auto;
  max-width: 1280px;
}
.center {
  display: flex;
  justify-content: center;
}
.centerel {
  top: 60px;
  display: flex;
  justify-content: center;
}
.pageset {
  display: flex;
  margin: 50px 220px;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  height: 230px;
  display: block;
}
.hidetext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 70%;
}
</style>
